<template>
    <!-- App.vue -->
    <v-app id="inspire">
        <v-app id="inspire">
            <v-navigation-drawer v-model="drawer" app clipped>
                <v-list dense>
                    <v-list-item
                        v-for="item in routes"
                        :key="item.name"
                        link
                        :href="item.path"
                    >
                        <v-list-item-action>
                            <v-icon>{{ item.meta.icon }}</v-icon>
                        </v-list-item-action>
                        <v-list-item-content>
                            <v-list-item-title>{{
                                item.name
                            }}</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list>
            </v-navigation-drawer>

            <v-app-bar app clipped-left>
                <v-app-bar-nav-icon
                    @click.stop="drawer = !drawer"
                ></v-app-bar-nav-icon>
                <v-toolbar-title>Application</v-toolbar-title>
            </v-app-bar>

            <v-content>
                <!-- Provides the application the proper gutter -->
                <v-container fluid>
                    <!-- If using vue-router -->
                    <router-view></router-view>
                </v-container>
            </v-content>

            <v-footer app>
                <span>&copy; 2020</span>
            </v-footer>
        </v-app>
    </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import { routes } from '@/router';

export default Vue.extend({
    name: 'App',

    components: {},

    data: () => ({
        drawer: null,
        routes,
    }),
    created() {
        this.$vuetify.theme.dark = true;
    },
    props: {
        source: String,
    },
});
</script>
